<template>
  <div class="flex_cm container" style="height: 100%">
    <search
      :data="header_list"
      @changeIsShow="
        (e) => {
          header_list[e].isShow = !header_list[e].isShow
          header_list[e].value = ''
        }
      "
      @search="search_key"
      @reset="
        header_list.forEach((item) => {
          item.value = ''
        }),
          search_key()
      "
    ></search>
    <div class="p_0_10 bg_fff flex1">
      <div class="flex_js p_10_0">
        <div class="c_666 fw">特殊日期配置</div>
        <div class="flex">
          <el-button type="primary" @click="show_box = true">新增</el-button>
          <setTable
            :data="header_list"
            :height_size="height_size"
            @changeShowTable="
              (e) => {
                header_list[e].showTable = !header_list[e].showTable
              }
            "
            @resetTableSet="
              () => {
                header_list.forEach((item) => {
                  item.showTable = true
                })
              }
            "
            @changeHeightSize="
              (e) => {
                height_size = e
              }
            "
          ></setTable>
        </div>
      </div>
      <myTable
        :data="list"
        :maxHeight="max_height"
        :height_size="height_size"
        :loading="loading"
        :header_list="header_list"
        @edit_list="edit_list"
      ></myTable>
      <el-pagination
        class="m_10_0 pagination"
        v-model:currentPage="page_data.current"
        v-model:page-size="page_data.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="list_debounce()"
        @current-change="list_debounce()"
      />
    </div>
    <el-drawer
      v-model="show_box"
      direction="rtl"
      size="50%"
      destroy-on-close
      @close="resetForm(adddateform)"
      :close-on-click-modal="false"
    >
      <template #title>
        <h4 v-if="add_form_data.id == ''">新增</h4>
        <h4 v-else>编辑</h4>
      </template>
      <template #default>
        <el-form
          :model="add_form_data"
          :rules="rules"
          ref="adddateform"
          label-width="150px"
        >
          <el-form-item label="特殊日期" prop="date">
            <el-date-picker
              v-model="add_form_data.date"
              type="date"
              format="YYYY-MM-DD"
              value-format="x"
              placeholder="请选择"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="是否工作日" prop="isWeekday">
            <el-radio-group v-model="add_form_data.isWeekday">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-divider style="margin-top: 20px"></el-divider>
          <div class="tr m_top10">
            <el-button @click="resetForm(adddateform)">取消</el-button>
            <el-button type="primary" @click="submit(adddateform)"
              >确定</el-button
            >
          </div>
        </el-form>
      </template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { formatDate, debounce, check_role } from '@/utils/utils' // 权限校验
import search from '@/view/components/search.vue'
import setTable from '@/view/components/setTable.vue'
import myTable from '@/view/components/myTable.vue'
import { onMounted, ref, onUnmounted } from 'vue'
import axios from '@/service/HttpRequest'
import serviceApi from '@/service/api'
import EventBus from '@/utils/EventBus'
import { FormInstance, ElMessage, ElMessageBox } from 'element-plus'
const adddateform = ref<FormInstance>()
const list = ref([])
const total = ref(0)
const max_height = ref()
const show_box = ref(false)
const loading = ref(false)
const height_size = ref(1)
const rules = ref({
  date: [{ required: true, message: '请选择特殊日期', trigger: 'change' }],
  isWeekday: [
    { required: true, message: '请选择是否工作日', trigger: 'change' },
  ],
})
const has_role_list = ref([
  { path: '', has_role: false },
  { path: 'specialDay/put', has_role: false },
  { path: 'specialDay/delete', has_role: false },
  { path: 'specialDay/post', has_role: false },
])
const header_list = ref([
  {
    label: '日期',
    value: '',
    showTable: true,
    type: 'dateDay',
    isShow: true,
    options: [],
    prop: 'createTime',
    is_time_stamp: true,
  },
  {
    label: '是否工作日',
    value: '',
    showTable: true,
    type: 'select',
    isShow: true,
    options: [
      { value: '1', label: '是' },
      { value: '0', label: '否' },
    ],
    prop: 'isWeekday',
  },
])
const page_data = ref({
  current: 1,
  pageSize: 10,
  date: '',
  isWeekday: '',
})
const add_form_data = ref({
  id: '',
  date: '',
  isWeekday: true,
})
onMounted(() => {
  has_role_list.value.forEach((item) => {
    item.has_role = check_role(item.path)
  })
  max_height.value = window.innerHeight - 320 // 不带分页的 table 高度
  EventBus.on('refresh', () => {
    get_list()
    ElMessage.success('操作成功！')
  })
  get_list()
})
onUnmounted(() => {
  EventBus.off('refresh')
})
const submit = (formEl: FormInstance | undefined) => {
  console.log(add_form_data.value)
  formEl.validate((valid) => {
    if (valid) {
      axios
        .request({
          url:
            serviceApi.specialDay_crud +
            (add_form_data.value.id == '' ? '' : '/' + add_form_data.value.id),
          method: add_form_data.value.id == '' ? 'post' : 'put',
          data: add_form_data.value,
        })
        .then((res) => {
          console.log(res)
          ElMessage.success('操作成功！')
          setTimeout(() => {
            get_list()
            show_box.value = false
          }, 1000)
        })
        .catch((err) => {
          ElMessage.error(err)
        })
    }
  })
}
const edit_list = (e) => {
  if (e.type == 1) {
    add_form_data.value = {
      id: e.item.id,
      date: parseInt(e.item.date) as any,
      isWeekday: e.item.isWeekday,
    }
    show_box.value = true
  } else {
    ElMessageBox.confirm('确定删除该记录', '', {
      cancelButtonText: '',
      confirmButtonText: '',
      closeOnClickModal: false,
      type: '',
    })
      .then(() => {
        axios
          .request({
            url: serviceApi.specialDay_crud + '/' + e.item.id,
            method: 'delete',
          })
          .then(() => {
            ElMessage.success('操作成功！')
            setTimeout(() => {
              get_list()
            }, 1000)
          })
      })
      .catch(() => {})
  }
}
const get_list = () => {
  axios
    .request({
      url: serviceApi.specialDay_list,
      method: 'post',
      data: page_data.value,
    })
    .then((res) => {
      console.log(res)
      if (res.data === null) return
      res.data.content.forEach((i) => {
        i.btn_list = [
          {
            label: '编辑',
            icon: 'table_edit',
            has_role: has_role_list.value[1].has_role,
            btn_show: true,
          },
          {
            label: '删除',
            icon: 'table_delete',
            has_role: has_role_list.value[2].has_role,
            btn_show: true,
          },
        ]
      })
      list.value = res.data.content
      total.value = parseInt(res.data.totalElements)
    })
}
let list_debounce = debounce(200, get_list)
const search_key = () => {
  page_data.value = {
    current: 1,
    pageSize: 10,
    date: header_list.value[0].value,
    isWeekday: header_list.value[1].value,
  }
  get_list()
}
const resetForm = (formEl: FormInstance | undefined) => {
  // 取消表单验证  还原参数
  if (!formEl) return
  formEl.resetFields()
  add_form_data.value = {
    id: '',
    date: '',
    isWeekday: true,
  }
  show_box.value = false
}
</script>

<style lang="scss" scoped></style>
